<template>
  <main class="main-container" v-loading="isLoading">
    <div class="search-container" v-loading="isLoading">
      <div style="display: flex">
        <el-text>保养项目名称：</el-text>
        <div style="margin-left: 10px">
          <el-select filterable clearable style="width: 240px" placeholder="请选择要检索的项目">
          </el-select>
        </div>
        <el-button style="margin-left: 10px" :icon="Refresh" circle></el-button>
        <div style="padding-left: 20px">
          <el-button type="primary" :icon="Search">检索项目</el-button>
        </div>
        <el-text style="margin-left: 20px">部件名称：</el-text>
        <div style="margin-left: 10px">
          <el-select filterable clearable style="width: 240px" placeholder="请选择要检索的部件">
          </el-select>
        </div>
        <el-button style="margin-left: 10px" :icon="Refresh" circle></el-button>
        <div style="padding-left: 20px">
          <el-button type="primary" :icon="Search">检索部件轮询任务</el-button>
        </div>
      </div>
    </div>
    <div class="table-container">
      <div class="table-tools">
        <el-button type="warning" :icon="CirclePlusFilled" @click="showAddItemDialog = true"
          >新增</el-button
        >
        <el-tooltip effect="dark" content="刷新" placement="top">
          <el-button :icon="Refresh">刷新任务列表</el-button>
        </el-tooltip>
      </div>
      <div class="table-content">
        <el-scrollbar style="margin-top: 10px">
          <el-table style="width: 100%">
            <el-table-column fixed prop="projectName" label="创建者" />
            <el-table-column fixed prop="site" label="创建时间" />
            <el-table-column fixed prop="creatorId" label="编辑者" />
            <el-table-column fixed prop="creationTime" label="最后一次编辑时间" />
            <el-table-column prop="lastModifierId" label="描述" />
            <el-table-column fixed="right" label="操作" width="120">
              <template #default="scope">
                <el-button
                  link
                  type="primary"
                  size="small"
                  @click.prevent="deleteRow(scope.$index)"
                >
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-scrollbar>
      </div>
    </div>
  </main>
</template>

<script setup lang="ts">
import { Search, Refresh, CirclePlusFilled } from '@element-plus/icons-vue'
import { ref } from 'vue'

const showAddItemDialog = ref(false)
const isLoading = ref(false)
function deleteRow(index: number) {}
</script>

<style scoped>
.table-content {
  padding: 0px 30px 20px;
}

.table-tools {
  padding: 30px 30px 0px;
  display: flex;
  justify-content: space-between;
}

.table-container {
  display: flex;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  height: 100%;
}

.main-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
}

.search-container {
  padding: 30px 30px 20px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
}
</style>
